<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>响应式项目</title>
    <link rel="stylesheet" href="/dist/output.css" />
  </head>
  <body class="m-0 p-0">
    <!-- 头部 -->
    <header id="header" class="w-screen py-0 px-10vw box-border bg-custom-gray border-b border-custom-gray flex justify-between items-center fixed left-0 top-0 z-50 sm:h-50px md:h-20">
      <!-- logo 部分 -->
      <div class="logo"></div>
      <!-- 导航栏 -->
      <nav class="flex items-center">
        <ul class="flex max-sm:h-0 max-sm:overflow-hidden max-sm:transition-all max-sm:duration-500 max-sm:flex-wrap max-sm:relative max-sm:top-6">
          <li class="nav-bar"><a href="#" class="text-custom-gray">网站首页</a></li>
          <li class="nav-bar"><a href="#" class="text-custom-gray">公司介绍</a></li>
          <li class="nav-bar"><a href="#" class="text-custom-gray">产品介绍</a></li>
          <li class="nav-bar"><a href="#" class="text-custom-gray">大事件</a></li>
          <li class="nav-bar"><a href="#" class="text-custom-gray">联系我们</a></li>
        </ul>
        <!-- 汉堡按钮，全屏状态下是不显示的 -->
        <button class="outline-0 border-0 cursor-pointer w-50px h-50px btn-bg hidden max-sm:block"></button>
      </nav>
    </header>
    <!-- 轮播图 -->
    <div id="pic" class="w-screen relative overflow-hidden mt-20 max-sm:h-40vh sm:h-50vh md:h-70vh">
      <ul class="w-300vw h-full flex absolute left-0 transition-all duration-1000">
        <li class="w-screen h-full"></li>
        <li class="w-screen h-full"></li>
        <li class="w-screen h-full"></li>
      </ul>
    </div>
    <!-- 热销项目 -->
    <div id="project" class="mt-50px mx-0">
      <!-- 标题 -->
      <div class="text-center mb-5 text-custom-gray2">
        <h2 class="text-custom-36 font-hairline">热销项目</h2>
        <p class="text-custom-gray2">Hot selling tour line</p>
      </div>
      <!-- 项目列表 -->
      <div class="w-4/5 mx-auto my-14 flex flex-wrap justify-around md:w-720px lg:w-960px xl:w-1140px">
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
        <div class="item">
          <img src="/src/img/7.png" alt="" class="img"/>
          <p class="font-thin mt-2.5">尼罗河是世界上最长的河流</p>
        </div>
      </div>
    </div>
    <!-- 页尾 -->
    <footer id="footer" class="w-full footer-bg max-sm:h-300 sm:h-400 md:h-500"></footer>
    <script src="./index.js"></script>
  </body>
</html>

